<template>
  <div>{{ count + 1 }}</div>
  <div>
    <button @click="count++">
      {{ count }}
    </button>
  </div>
  <div>
    <button @click="increment">
      {{ count }}
    </button>
  </div>

  <div>
    <button @click="mutateDeeply">mutateDeeply</button>
  </div>

  <div>
    <button @click="state.count++">
      {{ state.count }}
    </button>
  </div>
</template>

<!--
<script>
import { ref } from "vue";
const count = ref(0);
export default {
  setup() {
    const count = ref(0);
    function increment() {
      // 在 JavaScript 中需要 .value
      count.value++;
    }

    // 将 ref 暴露给模板
    return {
      count,
      increment,
    };
  },
};
</script>
-->

<!--单文件组件 (SFC) -->
<script setup>
import { ref } from "vue";
const count = ref(0);
function increment() {
  // 在 JavaScript 中需要 .value
  count.value++;
}

/**
 * 深层响应性
 */

const obj = ref({
  nested: { count: 0 },
  arr: ["foo", "bar"],
});

function mutateDeeply() {
  // 以下都会按照期望工作
  obj.value.nested.count++;
  obj.value.arr.push("baz");
  console.dir(obj);
}

/**
 * reactive()
 */
import { reactive } from "vue";

const state = reactive({ count: 0 });
</script>
